<template>
  <div class="MyAssignment">
       <div class="title">
          <i class="iconfont iconzuojiantou" @click="onClickLeft"></i>
          <span>我的任务</span>
          <i class="iconfont iconzuojiantou" style="color: white;"></i>
       </div>
       <div class="content">
           <div class="tab">
            <span :class="isActive=='all'?'active':''" @click="tabItem('all')">全部</span>
            <span :class="isActive=='已报名'?'active':''" @click="tabItem('已报名')">已报名</span>
            <span :class="isActive=='工作中'?'active':''" @click="tabItem('工作中')">工作中</span>
            <!-- <span :class="{active:isActive=='delay'}" @click="tabItem('delay','postpone','1')">延期</span> -->
            <span :class="isActive=='已完成'?'active':''" @click="tabItem('已完成')">已完成</span>
            <span :class="isActive=='已取消'?'active':''" @click="tabItem('已取消')">已取消</span>
            </div>
            <div class="content">
            <ul>
                <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                >  
                    <li @click="goTaskDetail(index)"  v-for="(item, index) in list" :key="index">
                    <div class="left">
                        <img :src="item.moonlightedUrl" v-if ="item.moonlightedUrl == null?false:true" alt="">
                        <img src="../assets/Mymi/InformImg.png" v-else alt="">
                    </div>
                    <div class="right">
                        <p class="one">{{item.moonlightedName}}</p>
                        <div class="three">
                        <div class="time">
                            <p>
                                <i class="iconfont iconduomeitiicon-"></i>
                                <span>{{item.moonlightedSite}}</span>
                            </p>
                            <!-- <p>
                                <i class="iconfont iconshijianbianjiwodeqianfenleishouye"></i>
                                <span>领取时间:</span>
                                <span>{{item.createTime}}</span>
                            </p> -->
                        </div>
                        <div class="timeImg">
                            <!-- 任务状态 1-已报名 2-工作中 3-已完成 4-已取消 -->
                            <!-- <img src="../assets/taskdetail/delay.png"  alt v-if="item.postpone == 1" /> -->                    
                            <span :class="item.cctMyjob.jobStatus =='已报名'? 'span1':item.cctMyjob.jobStatus=='工作中'?'span2':'span3'" >{{item.cctMyjob.jobStatus}}</span>
                        </div>
                        </div>
                        <p class="four">
                        <span>￥{{item.moonlightedMoney}}</span>
                        <!-- <span>￥{{item.cctMyjob.jobStatus=='已报名'||item.cctMyjob.jobStatus=='工作中'?true:false}}</span> -->
                        <span  v-if="item.cctMyjob.jobStatus=='已报名'||item.cctMyjob.jobStatus=='工作中'"    @click.stop="doSomething(item.cctMyjob.jobStatus,index,item.cctMyjob.jobId)">{{item.cctMyjob.jobStatus =='已报名'? '取消报名' :item.cctMyjob.jobStatus=='工作中'?'完成工作':item.cctMyjob.jobStatus}}</span>
                        <!-- <span>{{item.status==0?"待处理":item.status==1?'工作中':item.status==2?'工作中':item.status==3?'已验收':item.status==4?'已完成':item.status==6?'已取消':item.status==10?'已报名':item.status==5?"已领取":item.status}}</span> -->
                        </p>
                    </div>
                    </li>
                </van-list>  
            </ul>
            </div>
       </div>
      
      <div class="cancel-Box" v-show="ShowS" :style="CHeight">
            <div class="cancel-wicket">
                <div class="cancel-title">
                    <span>取消理由</span>
                    <img src="../assets/taskdetail/Colse.png" alt="" @click="wicket">
                </div>
                <div class="cancel-center">
                    <div class="cancel-charebox">
                        <div class="charebox">
                            <div @click="chareS(0,'选错了')">
                                <img src="../assets/taskdetail/Boxone.png" alt="" v-if="chare">
                                <img src="../assets/taskdetail/Boxtwo.png" alt="" v-else>
                            </div>
                            <span>选错了</span>
                        </div>
                        <div class="charebox">
                            <div @click="chareS(1,'干不了')">
                                <img src="../assets/taskdetail/Boxone.png" alt="" v-if="chareone">
                                <img src="../assets/taskdetail/Boxtwo.png" alt="" v-else>
                            </div>
                            <span>干不了</span>
                        </div>
                        <div class="charebox">
                            <div @click="chareS(2,'不想干了')">
                                <img src="../assets/taskdetail/Boxone.png" alt="" v-if="charetwo">
                                <img src="../assets/taskdetail/Boxtwo.png" alt="" v-else>
                            </div>
                            <span>不想干了</span>
                        </div>
                        <div class="charebox">
                            <div @click="chareS(3,'钱太少')">
                                <img src="../assets/taskdetail/Boxone.png" alt="" v-if="charethree">
                                <img src="../assets/taskdetail/Boxtwo.png" alt="" v-else>
                            </div>
                            <span>钱太少</span>
                        </div>
                        <div class="charebox">
                            <div @click="chareS(4,'其他')">
                                <img src="../assets/taskdetail/Boxone.png" alt="" v-if="charefour">
                                <img src="../assets/taskdetail/Boxtwo.png" alt="" v-else>
                            </div>
                            <span>其他</span>
                        </div>
                    </div>
                    <div class="charebox-Text">
                        <textarea autofocus rows="0" cols="value" placeholder="填写详细理由" maxlength="500"  v-model="textName">{{textName}}</textarea>
                        <span>{{figure}}/500</span>
                    </div>
                    <div class="center-button" >
                        <button @click="cancel()">提交</button>
                    </div>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
import { List, Toast } from "vant";
export default {
  name: "MyAssignment",
  data() {
    return {
      isActive: "all",
      taskList: [], //任务列表
      url: "",
      list: [],
      loading: false,
      finished: false,
      ShowS: false,
      chare: false,
      chareone: true,
      charetwo: true,
      charethree: true,
      charefour: true,
      textName: "",
      CHeight: {
        height: "100vh"
      },
      heightS: "",
      skip: 0, //1弹框2完成工作
      userId: "",
      ShowIndex: null
    };
  },
  created() {
    this.userId = JSON.parse(localStorage.getItem("key")).userId;
    this.url = window.domain;
    // // 监听浏览器返回
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.goBack, false);
    }
    this.getDataList("all"); //获取数据
  },
  mounted() {
    //监听手机屏幕的高度
    // this.heightS = document.documentElement.clientHeight || document.body.clientHeight;
    this.heightS = window.screen.height;
    window.onresize = () => {
      var heightS =
        document.documentElement.clientHeight || document.body.clientHeight;
      var SS = heightS * 2 / 100;
      if (SS < 9.6) {
        var HH = String(this.heightS * 2 / 100);
        this.CHeight.height = HH + "rem";
      } else {
        this.CHeight.height = "100vh";
      }
    };
  },
  destroyed() {
    // 销毁监听浏览器事件
    window.removeEventListener("popstate", this.goBack, false);
  },
  computed: {
    figure() {
      return this.textName.length;
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push("/Mymi");
    },
    //tab切换栏
    tabItem(val) {
      this.isActive = val;
      this.getDataList(val);
    },
    //获取任务数据列表
    getDataList(val) {
      console.log(val);
      var userId = JSON.parse(localStorage.getItem("key")).userId;
      if (val == "all") {
        this.$axios
          .post("/cct/myjob/findByUserId", {
            userId
          })
          .then(res => {
            console.log("获取我的任务列表", res.data.rows);
            this.list = res.data.rows;
          });
      } else {
        this.$axios
          .post("/cct/myjob/findByJobStatus", {
            userId,
            jobStatus: val
          })
          .then(res => {
            console.log("获取我的任务列表", res.data.rows);
            this.list = res.data.rows;
          });
      }
    },
    //跳转详情
    goTaskDetail(index) {
      // this.$router.push({path:"/taskDetails",query:{name:"我的任务",id:this.taskList[index].id}});
      //   var userId = JSON.parse(localStorage.getItem("key")).userId;
      this.$router.push({
        path: "/TaskDetailsT",
        query: {
          id: this.list[index].cctMyjob.jobId,
          userId: this.list[index].cctMyjob.userId
        }
      });
    },
    //点击报名&工作中
    doSomething(val, index,jobId) {
      if (val == "已报名") {
        this.ShowS = true;
        this.ShowIndex = index;
      }
      if (val == "工作中") {
        this.$router.push({
          path: "/perform",
          query: {
            jobName: this.list[index].moonlightedName,
            agencyId: this.list[index].superiorAgentid,
            userId: this.list[index].cctMyjob.userId,
            jobId:jobId
          }
        });
      }
    },
    wicket() {
      this.ShowS = false;
    },
    //单选按钮
    chareS(index, text) {
      console.log(index, text);
      if (index == 0) {
        this.chare = !this.chare;
        this.text = this.chare == false ? text : "";
        console.log(this.text);
        this.chareone = true;
        this.charetwo = true;
        this.charethree = true;
        this.charefour = true;
      }
      if (index == 1) {
        this.text = text;
        this.chareone = false;
        this.chare = true;
        this.charetwo = true;
        this.charethree = true;
        this.charefour = true;
      }
      if (index == 2) {
        this.text = text;
        this.charetwo = false;
        this.chare = true;
        this.chareone = true;
        this.charethree = true;
        this.charefour = true;
      }
      if (index == 3) {
        this.text = text;
        this.charethree = false;
        this.chare = true;
        this.chareone = true;
        this.charetwo = true;
        this.charefour = true;
      }
      if (index == 4) {
        this.text = text;
        this.charefour = false;
        this.chare = true;
        this.chareone = true;
        this.charetwo = true;
        this.charethree = true;
      }
    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        if (
          this.list.length + 10 <= this.taskList.length &&
          this.taskList.length >= 10
        ) {
          console.log("this.list111");
          for (let i = 0; i < 10; i++) {
            // if(this.taskList[this.list.length].image != null){
            this.list.push(this.taskList[this.list.length]);
            // }
            // console.log("this.list",this.list)
          }
          // 加载状态结束
        } else if (this.taskList.length < 10) {
          console.log("this.list++++", this.list.length);
          console.log("this.taskList++++", this.taskList.length);
          // console.log("this.list222",this.list.length)
          for (let k = 0; k < this.taskList.length; k++) {
            if (this.taskList[this.list.length].image != null) {
              this.list.push(this.taskList[this.list.length]);
            }
            // this.finished = true;
          }
          this.loading = false;
          this.finished = true;
        } else {
          console.log("this.list3333");
          for (let j = 0; j < 1; j++) {
            this.list.push(this.taskList[this.list.length]);
          }
        }

        this.loading = false;
        // 数据全部加载完成
        if (
          this.list.length == this.taskList.length ||
          this.list.length > this.taskList.length
        ) {
          this.finished = true;
        }
      }, 500);
      // console.log(this.list)
      console.log("this.list", this.list);
    },
    goBack() {
      this.$router.push("/Mymi");
    },
    cancel() {
      var secletId =localStorage.getItem("sectedId");
      this.$axios
        .post("/cct/cancel/jobCancel", {
          jobId: this.list[this.ShowIndex].cctMyjob.jobId,
          jobName: this.list[this.ShowIndex].moonlightedName,
          userId: this.list[this.ShowIndex].cctMyjob.userId,
          reson: this.text + this.textName,
          agentId:secletId?secletId:0 ,
          agentName: this.list[this.ShowIndex].superiorAgentName,
          agentTel: this.list[this.ShowIndex].superiorAgentTel,
          strus: this.list[this.ShowIndex].status
        })
        .then(res => {
          console.log("取消任务", res.data.code);
          if (res.data.code == 0) {
            Toast("取消成功");
            this.ShowS = false;
          }else{
            Toast("已经在审核了~");
            this.ShowS = false;
          }
        });
    }
  }
};
</script>

<style lang="less" scoped>
.MyAssignment {
  font-size: 0;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  .title {
    width: 100%;
    font-size: 0.36rem;
    color: #333;
    height: 1.25rem;
    line-height: 1.25rem;
    background-color: #fff;
    margin-bottom: 0.2rem;
    display: flex;
    justify-content: space-between;
    padding: 0 0.2rem;
    box-sizing: border-box;
  }
  .content {
    .tab {
      display: flex;
      justify-content: space-between;
      padding: 0.15rem 0.3rem;
      box-sizing: border-box;
      font-size: 0.26rem;
      background-color: #fff;
      margin-top: 0.1rem;
      .active {
        color: #38a83f;
        border-bottom: 2px solid #38a83f;
        padding-bottom: 0.1rem;
        box-sizing: border-box;
      }
    }
    .content {
      font-size: 0.26rem;
      color: #3333;
      // overflow-y: scroll;
      ul {
        li {
          background-color: #fff;
          display: flex;
          justify-content: space-between;
          padding: 0.25rem 0.3rem;
          box-sizing: border-box;
          margin-top: 0.1rem;
          .left {
            width: 2rem;
            height: 2rem;
            margin-right: 0.2rem;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            width: 4.7rem;
            .one {
              line-height: 0.63rem;
              font-size: 0.26rem;
              color: #171717;
            }
            .three {
              display: flex;
              justify-content: space-between;
              margin: 0.15rem 0rem 0.2rem 0rem;
              line-height: 0.4rem;
              .timeImg {
                .span1 {
                  color: #07b5f5;
                }
                .span2 {
                  color: #f58807;
                }
                .span3 {
                  color: #38a83f;
                }
              }
              i {
                font-size: 0.3rem;
                vertical-align: -1px;
              }
            }
            .four {
              display: flex;
              justify-content: space-between;
              line-height: 0.56rem;
              span {
                &:nth-child(1) {
                  color: #ff3f3f;
                }
                &:nth-child(2) {
                  display: inline-block;
                  width: 1.78rem;
                  height: 0.52rem;
                  color: #666666;
                  border: 0.01rem solid #999999;
                  border-radius: 0.28rem;
                  font-size: 0.26rem;
                  text-align: center;
                }
              }
            }
          }
        }
      }
    }

    .nodata {
      width: 100%;
      text-align: center;
      font-size: 0.26rem;
      color: #666;
      margin: 0.4rem 0 0.4rem 0;
    }
  }
  .cancel-Box {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.45);
    .cancel-wicket {
      width: 5.9rem;
      height: 7.98rem;
      background: #ffffff;
      margin: 2.3rem auto;
      border-radius: 0.1rem;
      .cancel-title {
        font-family: "PingFang-SC-Medium";
        color: #333333;
        padding: 0.32rem 0rem;
        text-align: center;
        span {
          font-size: 0.3rem;
          font-family: "PingFang-SC-Medium";
          font-weight: 530;
          color: #333333;
          line-height: 0.28rem;
          margin-left: 0.28rem;
        }
        img {
          float: right;
          width: 0.28rem;
          // line-height: 0.28rem;
          margin-right: 0.28rem;
        }
      }
      .cancel-center {
        width: 100%;
        height: 6rem;
        padding: 0rem 0.48rem;
        .cancel-charebox {
          width: 100%;
          height: 4rem;
          .charebox {
            display: flex;
            margin-bottom: 0.5rem;
          }
          img {
            width: 0.32rem;
            height: 0.32rem;
          }
          span {
            font-size: 0.26rem;
            font-family: "PingFang-SC-Medium";
            font-weight: 530;
            color: #333333;
            margin-left: 0.3rem;
          }
        }
        .charebox-Text {
          width: 100%;
          height: 2rem;
          margin: 0rem auto;
          position: relative;
          textarea {
            color: #333;
            font-size: 0.26rem;
            width: 100%;
            height: 2rem;
            // border: 1px solid rgb(206, 206, 206);
            background: #f8f8f8;
            resize: none;
            padding: 0.17rem 0.17rem;
          }
          span {
            position: absolute;
            top: 1.6rem;
            left: 4.1rem;
            font-size: 0.22rem;
            color: #c3c3c3;
          }
        }
        .center-button {
          width: 100%;
          height: 0.6rem;
          margin-top: 0.2rem;
          button {
            width: 60%;
            height: 0.6rem;
            font-size: 0.3rem;
            font-family: "PingFang-SC-Medium";
            font-weight: 520;
            color: #ffffff;
            background: #38a83f;
            margin-left: 20%;
            border-radius: 0.1rem;
          }
        }
      }
    }
  }
}
</style>
